<template>
	<div>
		<my-list ref="list" url="/info/product/find" @loaded="loadData"  style="width: 100%">
			<el-table-column type="index" width="50"></el-table-column>
			<el-table-column label="名称" align="center">
				<template slot-scope="scope">
					<a class="link" @click="EditClick(scope.row)">{{scope.row.name}}</a>
				</template>
			</el-table-column>
			<el-table-column label="Logo" align="center">
				<template slot-scope="scope">
					<img :src="scope.row.showImages[0].fullUrl" v-if="scope.row.showImages.length"/>
				</template>
			</el-table-column>
			<el-table-column prop="category.name" label="类型" align="center"></el-table-column>
			<el-table-column prop="material" label="木种" align="center"></el-table-column>
			<el-table-column prop="guidePrice_res" label="官方价格（单位：元）" align="center"></el-table-column>
			<el-table-column prop="status_res" label="状态" align="center"></el-table-column>
			<el-table-column label="Sku" align="center">
				<template slot-scope="scope">
					<div v-for="item in scope.row.skuDefines">
						{{item.key + ":" + item.value}}
					</div>
				</template>
			</el-table-column>
			<el-table-column  label="操作" align="center">
				<template slot-scope="scope">
					<el-button @click="row_click(scope.row)">
						克隆
					</el-button>
				</template>
			</el-table-column>
		</my-list>
	</div>
</template>

<script type="text/ecmascript-6">
	import MyList from "element-ui-ext/packages/my-list";

	export default {
		name: "product-list",
		components: {MyList},
		computed: {},
		data() {
			return {
			}
		},
		mounted() {
			this.$refs.list.loadData();
		},
		methods: {
			loadData(res, param) {
				var list = res.data.data;
				jv.fillRes(list, 'status', jv.ProductStatusEnum);

				list.forEach(item => {
					item.guidePrice_res = (item.guidePrice / 100).toFixed(2);
				});
			},

			EditClick(row) {
				this.$router.push('/info/product/edit?id=' + row.id);
			},
			row_click(row){
				jv.prompt("请输入新商品名称","克隆 《" + row.name +"》 商品").then(res=>{
					this.$http.post("/info/product/clone",{productId: row.id,name:res.value}).then(res=>{
						this.$refs.list.loadData();
					});
				});
			}
		}
	}
</script>

<style scoped>
	>>> .el-tabs__content {
		border: 1px solid #d9d9d9;
		border-top-width: 0;
		padding: 25px;
	}

	>>> img {
		height: 50px;
	}
</style>
